<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>管理入口-黑名单信息列表</title>

<%@ include file="../common.jsp"%>
<script type="text/javascript" src="${path }/static/vender/bootstrap/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="${path }/static/js/mustache.min.js"></script>

<style type="text/css">
.table-responsive td {
	max-width: 100px;
	/* overflow: hidden; */
	word-break: break-all
}
</style>
</head>

<body>
	<jsp:include page="${pagePath }/header.jsp">
		<jsp:param value="1" name="active" />
	</jsp:include>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<jsp:include page="../data/left_navbar.jsp">
					<jsp:param value="7" name="active" />
				</jsp:include>
			</div>

			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
				<h3 class="page-header">
					黑名单信息预览
					<button type="button" id="addInfoBtn" class="btn btn-info pull-right">&nbsp;添加&nbsp;</button>
				</h3>

				<div class="row">
					<div class="col-sm-6 col-sm-offset-3">
						<label class="form-inline">检索条件: <input type="text" class="form-control" id="keywords" placeholder="mac/qq/微信号/手机号">
						</label>
						<button type="button" class="btn btn-info" onclick="initPage();getInfoList();">&nbsp;检索&nbsp;</button>
					</div>
				</div>
				<div class="table-responsive">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>#</th>
								<th>布控名称</th>
								<th>设备MAC地址</th>
								<th>手机号</th>
								<th>QQ</th>
								<th>微信</th>
								<th>特征码1</th>
								<th>特征码2</th>
								<th>特征码3</th>
								<th>更新时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="listInfo">

						</tbody>
					</table>
					<div style="background-color: #f5f5f5;" class="text-center">
						<ul id="pageChoose"></ul>
					</div>
					<!-- 分页条 -->
				</div>
				
				<div id="addPanel" class="modal fade" tabindex="-1" role="dialog">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title">添加</h4>
							</div>
							<div class="modal-body">
								<form id="addForm" class="form-horizontal">
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">布控名称:</label>
										<input type="text" class="form-control" id="monitorName" placeholder="必填">
									</div>
			
									<hr />
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">MAC:</label>
										<input type="text" class="form-control" id="mac" placeholder="必填" 
										data-container="body" data-toggle="popover" data-placement="right" data-content="MAC地址错误或含有非法字符，请检查!">
									</div>
									<div class="form-group form-inline">
										<label for="message-text" class="control-label col-sm-3">手机号:</label>
										<input type="text" class="form-control" id="phoneNumber">
									</div>
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">QQ号:</label>
										<input type="text" class="form-control" id="qq">
									</div>
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">微信号:</label>
										<input type="text" class="form-control" id="wechat">
									</div>
			
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">特征码1:</label>
										<input type="text" class="form-control" id="flag1"
											placeholder="邮箱/IMSI/IMEI/淘宝/京东/微博">
									</div>
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">特征码2:</label>
										<input type="text" class="form-control" id="flag2"
											placeholder="邮箱/IMSI/IMEI/淘宝/京东/微博">
									</div>
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">特征码3:</label>
										<input type="text" class="form-control" id="flag3"
											placeholder="邮箱/IMSI/IMEI/淘宝/京东/微博">
									</div>
									<div class="form-group " style="margin-bottom: -10px;">
										<div id="msgDiv" class="alert alert-warning col-md-offset-1 col-md-10 text-center" style="display: none;" role="alert"></div>
									</div>
			
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<button id="saveInfoBtn" type="button" class="btn btn-primary">保存</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
				<!-- /.modal -->
			
			
				<div id="editPanel" class="modal fade" tabindex="-1" role="dialog">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title">修改</h4>
							</div>
							<div class="modal-body">
								<form id="editForm" class="form-horizontal">
									<input id="idMod" type="hidden" />
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">布控名称:</label>
										<input type="text" class="form-control" id="monitorNameMod" placeholder="必填">
									</div>
									<hr />
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">MAC:</label>
										<input type="text" class="form-control" id="macMod">
									</div>
									<div class="form-group form-inline">
										<label for="message-text" class="control-label col-sm-3">手机号:</label>
										<input type="text" class="form-control" id="phoneNumberMod">
									</div>
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">QQ号:</label>
										<input type="text" class="form-control" id="qqMod">
									</div>
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">微信号:</label>
										<input type="text" class="form-control" id="wechatMod">
									</div>
			
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">特征码1:</label>
										<input type="text" class="form-control" id="flag1Mod"
											placeholder="邮箱/IMSI/IMEI/淘宝/京东/微博">
									</div>
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">特征码2:</label>
										<input type="text" class="form-control" id="flag2Mod"
											placeholder="邮箱/IMSI/IMEI/淘宝/京东/微博">
									</div>
									<div class="form-group form-inline">
										<label for="recipient-name" class="control-label col-sm-3">特征码3:</label>
										<input type="text" class="form-control" id="flag3Mod"
											placeholder="邮箱/IMSI/IMEI/淘宝/京东/微博">
									</div>
									<div class="form-group " style="margin-bottom: -10px;">
										<div id="msgModDiv" class="alert alert-warning col-md-offset-1 col-md-10 text-center" style="display: none;" role="alert"></div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<button id="modifyRectBtn" type="button" class="btn btn-primary">修改</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
				<!-- /.modal -->
				
			</div>
		</div>
	</div>

	<input id="curPage" type="hidden" />
	<input id="totalPage" type="hidden" />

	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>

	<script id="tpl4table" type="x-tmpl-mustache">
		{{#listData}}
		<tr>
			<td>{{index }}</td>
            <td>{{monitorName}}</td>
			<td>{{mac}}</td>
			<td>{{phoneNumber}}</td>
			<td>{{qq}}</td>
			<td>{{wechat}}</td>
			<td>{{flag1}}</td>
			<td>{{flag2}}</td>
			<td>{{flag3}}</td>
			<td>{{updateTime}}</td>
			<td>
				<a href="javascript:void(0);" onclick="deleteInfo({{id}});" class="btn btn-primary">删除</a> 
				<a href="javascript:void(0);" onclick="editInfo({{id}});" id="editInfoBtn" class="btn btn-primary">编辑</a> 
			</td>
		</tr>
		{{/listData}}
	</script>

	<script type="text/javascript">
		$(document).ready(function() {
			getInfoList();
		});
		
		function initPage(){
			$('#curPage').val("");
		}
		
		$("#addInfoBtn").click(function(){
			$("#addPanel").modal({backdrop: 'static', keyboard: false});
		});
		
		function editInfo(id) {
			getBlacklistById(id);
			$("#editPanel").modal({backdrop: 'static', keyboard: false});
		}
		
		function deleteInfo(id){
			var r = confirm("确定删除当前数据吗？");
			if(r){
				$.ajax({
			        type: "post",
			        url: "${path }/alarm/delBlacklist",
			        data: {
			        	"id" : id
			        },
			        success: function(data) {
			        	
			        	if(data && data.status==true) {
			        		initPage();
			        		getInfoList();
			        	} else {
			        		$.messager.popup(data.msg);
			        	}
			        }
				});
			}
		}
		
		function getInfoList(){
			var PAGE_SIZE = 10;
			var curPage = $('#curPage').val();
			var totalPage = $('#totalPage').val();
			var keywords = $("#keywords").val();
			
	        if(curPage == ""){
				curPage = 1;
			}
		    $.ajax({
		        type: "post",
		        url: "${path }/alarm/blacklistInfo",
		        data: {
		        	"curPage" : curPage,
					"totalPage" : totalPage,
					"keywords" : keywords
		        },
		        success: function(data) {
		        	$('#curPage').val(data.currentPage); //当前页
					$('#totalPage').val(data.totalPage); //总页数
					$("#listInfo").empty();
					$("#pageChoose").empty();
					if (data.listInfo.length > 0) {
						var listInfo = [];
						for(var i=0; i<data.listInfo.length; i++) {
							var index = PAGE_SIZE * (curPage - 1) + 1 + parseInt(i);
							var obj = {"index":index , "id": data.listInfo[i].id, "monitorName" : data.listInfo[i].monitorName , "mac" : data.listInfo[i].mac , "phoneNumber" : data.listInfo[i].phoneNumber , "qq" : data.listInfo[i].qq , "wechat" : data.listInfo[i].wechat , "flag1" : data.listInfo[i].flag1 , "flag2" : data.listInfo[i].flag2 , "flag3" : data.listInfo[i].flag3 , "updateTime" : dateForm(data.listInfo[i].updateTime)};
							listInfo.push(obj);
						}
						var list = new Object();
						list.listData = listInfo;
						var template = $('#tpl4table').html();
						Mustache.parse(template); 
						var htmlStr= Mustache.render(template, list);
						$("#listInfo").append(htmlStr);
						setupPageChoose(data.currentPage, data.totalPage,"pageChoose","curPage",getInfoList);
					} else {
						$("#listInfo").append("<tr><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td></tr>");
					}
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
		
		$("#saveInfoBtn").click(function(){
			//if($("#addPanel").valid()==false)
			//	return false;
			
			if(!validateMac($("#mac").val())){
				return false;
			}
			 $.ajax({
		        type: "post",
		        url: "${path }/alarm/addBlacklist",
		        data: {
		        	"mac" : $("#mac").val(),
		        	"phoneNumber" : $("#phoneNumber").val(),
		        	"qq" : $("#qq").val(),
		        	"wechat" : $("#wechat").val(),
		        	"monitorName" : $("#monitorName").val(),
		        	"flag1" : $("#flag1").val(),
		        	"flag2" : $("#flag2").val(),
		        	"flag3" : $("#flag3").val()
		        },
		        success: function(data) {
		        	if(data && data.status==true) {
		        		$('#addPanel').modal('hide');
		        		getInfoList();
		        	} else {
		        		$("#msgDiv").show().html(data.msg);
		        		setTimeout(function() {$("#msgDiv").hide();}, 4000);
		        	}
		        }
			});
		});
		
		$("#modifyRectBtn").click(function(){
			if(!validateMac($("#macMod").val())){
				return false;
			}
			$.ajax({
		        type: "post",
		        url: "${path }/alarm/updateBlacklist",
		        data: {
		        	"id" : $("#idMod").val(),
		        	"mac" : $("#macMod").val(),
		        	"phoneNumber" : $("#phoneNumberMod").val(),
		        	"qq" : $("#qqMod").val(),
		        	"wechat" : $("#wechatMod").val(),
		        	"monitorName" : $("#monitorNameMod").val(),
		        	"flag1" : $("#flag1Mod").val(),
		        	"flag2" : $("#flag2Mod").val(),
		        	"flag3" : $("#flag3Mod").val()
		        },
		        success: function(data) {
		        	if(data && data.status==true) {
		        		$('#editPanel').modal('hide');
		        		getInfoList();
		        	} else {
		        		$("#msgModDiv").show().html(data.msg);
		        		setTimeout(function() {$("#msgModDiv").hide();}, 4000);
		        	}
		        }
			});
		});
		
		function getBlacklistById(id){
			$.ajax({
		        type: "post",
		        url: "${path }/alarm/getBlacklistById",
		        data: {
		        	"id" : id
		        },
		        success: function(data) {
		        	$("#idMod").val(data.dataInfo.id);
					$("#macMod").val(data.dataInfo.mac);
		        	$("#phoneNumberMod").val(data.dataInfo.phoneNumber);
		        	$("#qqMod").val(data.dataInfo.qq);
		        	$("#wechatMod").val(data.dataInfo.wechat);
		        	$("#taobaoMod").val(data.dataInfo.taobao);
		        	$("#monitorNameMod").val(data.dataInfo.monitorName);
					$("#flag1Mod").val(data.dataInfo.flag1);
					$("#flag2Mod").val(data.dataInfo.flag2);
					$("#flag3Mod").val(data.dataInfo.flag3);
		        }
			});
		}
		
		//Mac校验
		function validateMac(macStr) { 
			var falg = true;
		    var expre = "^[A-F0-9]{2}(-[A-F0-9]{2}){5}$";  
		    var regexp = new RegExp(expre);  
		    if (!regexp.test(macStr)) {  
		    	$("#mac").popover("show");  
		    	setTimeout(function() {$("#mac").popover("destroy");}, 5000);
		    	falg = false;
		    } 
		    return falg;
		} 
	</script>
</body>
</html>